<template>
  <div class="page">
    <div class="login-box">
      <p data-v-032893be class="title">欢迎登录</p>
      <el-tabs v-model="activeName">
        <el-tab-pane label="求职者登录" name="first">
          <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="0"
            class="demo-ruleForm"
          >
            <el-form-item prop="tel">
              <el-input
                type="text"
                prefix-icon="el-icon-user-solid"
                v-model="ruleForm.tel"
                auto-complete="off"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="pass" v-if="visible">
              <el-input
                type="password"
                prefix-icon="el-icon-lock"
                v-model="ruleForm.pass"
                auto-complete="off"
                placeholder="请输入密码"
              >
                <i
                  slot="suffix"
                  title="显示密码"
                  @click="changePass('show')"
                  style="cursor: pointer"
                  class="iconfont iconyanjing_kai"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="pass" v-else>
              <el-input
                type="text"
                v-model="ruleForm.pass"
                auto-complete="off"
                placeholder="请输入密码"
              >
                <i
                  slot="suffix"
                  title="隐藏密码"
                  @click="changePass('hide')"
                  style="cursor: pointer"
                  class="iconfont iconyanjing_bi"
                ></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                :loading="logining"
                :disabled="true"
                v-if="!isLog"
                @click="submitForm(ruleForm)"
                style="width: 100%"
                >登录</el-button
              >
              <el-button
                type="primary"
                :loading="logining"
                v-else-if="isLog"
                @click="submitForm(ruleForm)"
                style="width: 100%"
                >登录</el-button
              >
              <!-- <p class="login" @click="gotoLogin">已有账号？立即登录</p> -->
            </el-form-item>
            <el-form-item class="login">
              <label id="showPasswordToggle">
                <el-checkbox v-model="checked" id="showPasswordCheck"
                  >已阅读并同意《服务协议》</el-checkbox
                >
              </label>
              <div class="gotoRight">
                <span @click="gotoLoginForget">忘记密码</span>
                <el-divider direction="vertical"></el-divider>
                <span @click="gotoLoginReg">免费注册</span>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="企业登录" name="second">
          <el-form
            :model="ruleForm2"
            status-icon
            :rules="rules"
            ref="ruleForm2"
            label-width="0"
            class="demo-ruleForm"
          >
            <el-form-item prop="account">
              <el-input
                type="text"
                prefix-icon="el-icon-user-solid"
                v-model="ruleForm2.account"
                auto-complete="off"
                placeholder="请输入企业账号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="pass">
              <el-input
                type="password"
                prefix-icon="el-icon-lock"
                v-model="ruleForm2.pass"
                auto-complete="off"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item prop="smscode" class="code">
              <el-input
                v-model="ruleForm2.smscode"
                placeholder="短信验证码"
              ></el-input>
              <el-button
                :disabled="true"
                @click="sendCode"
                v-if="disabled == 0"
                >{{ buttonText }}</el-button
              >
              <el-button
                type="primary"
                :disabled="isDisabled"
                class="btn-color"
                @click="sendCode"
                v-else-if="disabled == 1"
                >{{ buttonText }}</el-button
              >
            </el-form-item> -->
            <el-form-item>
              <el-button
                :loading="logining"
                :disabled="true"
                v-if="!isLogin"
                @click="submitForm2(ruleForm2)"
                style="width: 100%"
                >登录</el-button
              >
              <el-button
                type="primary"
                :loading="logining"
                v-else-if="isLogin"
                @click="submitForm2(ruleForm2)"
                style="width: 100%"
                >登录</el-button
              >
            </el-form-item>
            <el-form-item class="login">
              <label id="showPasswordToggle">
                <el-checkbox v-model="checked" id="showPasswordCheck"
                  >已阅读并同意《服务协议》</el-checkbox
                >
              </label>
              <div class="gotoRight">
                <span @click="gotoLoginForget">忘记密码</span>
                <el-divider direction="vertical"></el-divider>
                <span @click="gotoLoginReg">免费注册</span>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data() {
    // <!--验证账号-->
    let validateAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入企业账号'))
      } else {
        callback()
      }
    }
    // <!--验证密码-->
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    // <!--验证手机号是否合法-->
    let validateTel = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号码'))
      } else {
        callback()
      }
    }
    //  <!--验证码是否为空-->
    let checkSmscode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机验证码'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        account: '',
        pass: '',
        tel: '',
      },
      ruleForm2: {
        account: '',
        pass: '',
        tel: '',
        smscode: '',
      },
      rules: {
        account: [
          { required: true, message: '请输入企业账号', trigger: 'blur' },
          {
            pattern: /^(?!(\d+)$)[a-zA-Z\d_]{4,20}$/,
            message: '企业账号长度4-20，可包括数字、字母、下划线',
            trigger: 'blur',
          },
          { validator: validateAccount, trigger: 'blur' },
        ],
        pass: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
            message: '密码长度为6-20位，可以为数字、字母',
            trigger: 'blur',
          },
          { validator: validatePass, trigger: 'blur' },
        ],
        tel: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
            message: '请输入正确的11位手机号码',
            trigger: 'blur',
          },
          { validator: validateTel, trigger: 'blur' },
        ],
        smscode: [
          { required: true, message: '请输入短信验证码', trigger: 'blur' },
          {
            pattern: /^[0-9]{6}$/,
            message: '请输入正确的六位数字验证码',
            trigger: 'blur',
          },
          { validator: checkSmscode, trigger: 'blur' },
        ],
      },
      activeName: 'first',
      buttonText: '获取短信验证码',
      isDisabled: false, // 是否禁止点击发送验证码按钮
      flag: true,
      visible: true,
      checked: true,
      disabled: 0,
      isLog: false,
      isLogin: false,
      logining: false,
    }
  },
  watch: {
    //账号验证btn按钮显示高亮
    ruleForm: {
      handler: function () {
        if (this.ruleForm.tel != '' && this.ruleForm.pass != '') {
          this.isLog = true
        } else {
          this.isLog = false
        }
      },
      deep: true,
    },
    //手机验证btn按钮显示高亮
    // 'ruleForm2.tel'() {
    //   if (this.ruleForm2.tel != '' && this.ruleForm.pass != '') {
    //     this.disabled = 1
    //   } else {
    //     this.disabled = 0
    //   }
    // },
    ruleForm2: {
      handler: function (val, oldval) {
        // console.log(oldval)
        if (this.ruleForm2.account != '' && this.ruleForm2.pass != '') {
          this.isLogin = true
        } else {
          this.isLogin = false
        }
      },
      deep: true, //对象内部的属性监听，也叫深度监听
    },
  },
  methods: {
    //密码判断渲染，true:暗文显示，false:明文显示
    changePass(value) {
      this.visible = !(value === 'show')
    },
    // <!--发送验证码-->
    // sendCode() {
    //   let tel = this.ruleForm2.tel
    //   if (this.checkMobile(tel)) {
    //     console.log(tel)
    //     let time = 60
    //     this.buttonText = '已发送'
    //     this.isDisabled = true
    //     if (this.flag) {
    //       this.flag = false
    //       let timer = setInterval(() => {
    //         time--
    //         this.buttonText = time + ' s'
    //         if (time === 0) {
    //           clearInterval(timer)
    //           this.buttonText = '重新获取'
    //           this.isDisabled = false
    //           this.flag = true
    //         }
    //       }, 1000)
    //     }
    //   }
    // },
    // <!--用户登录-->
    submitForm(ruleForm) {
      const data = {
        uphone: this.ruleForm.tel,
        upassword: this.ruleForm.pass,
      }
      this.$request
        .post('/api/api/UserInfo/Select', data)
        .then((res) => {
          // console.log(res);
          if (res.code === 1) {
            if (res.data.ustatus === 1) {
              if (
                this.ruleForm.tel == res.data.uphone &&
                this.ruleForm.pass == res.data.upassword
              ) {
                sessionStorage.setItem('userMessage', JSON.stringify(res.data))
                this.logining = true
                setTimeout(() => {
                  this.$router.push({
                    path: '/',
                  })
                }, 400)
                this.$message({
                  message: '用户登录成功！',
                  type: 'success',
                })
              } else {
                this.logining = false
                this.$message({
                  message: '用户登录失败！请检查手机号或密码是否正确',
                  type: 'error',
                })
              }
            }
            if (res.data.ustatus === 2) {
              this.$message({
                message: '用户正在审核中！请等待审核结果',
                type: 'warning',
              })
            }
            if (res.data.ustatus === 0) {
              this.$message({
                message: '用户审核未通过！请再次注册账号',
                type: 'error',
              })
            }
          } else {
            this.$message({
              message: '该用户未进行注册，注册一个？',
              type: 'error',
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // <!--企业登录-->
    submitForm2(ruleForm) {
      console.log(ruleForm)
      const data = {
        cpassword: this.ruleForm2.pass,
        caccount: this.ruleForm2.account,
      }
      this.$request
        .post('/api/api/ZpCompany/Select', data)
        .then((res) => {
          // console.log(res)
          if (res.code === 1) {
            if (res.data.cstatus === 1) {
              if (
                this.ruleForm2.account == res.data.caccount &&
                this.ruleForm2.pass == res.data.cpassword
              ) {
                sessionStorage.setItem(
                  'companyMessage',
                  JSON.stringify(res.data)
                )
                this.logining = true
                setTimeout(() => {
                  this.$router.push({
                    path: '/',
                  })
                }, 400)
                this.$message({
                  message: '用户登录成功！',
                  type: 'success',
                })
              } else {
                this.logining = false
                this.$message({
                  message: '用户登录失败！请检查手机号或密码是否正确',
                  type: 'error',
                })
              }
            }
            if (res.data.cstatus === 2) {
              this.$message({
                message: '用户正在审核中！请等待审核结果',
                type: 'warning',
              })
            }
            if (res.data.cstatus === 0) {
              this.$message({
                message: '用户审核未通过！请再次注册账号',
                type: 'error',
              })
            }
          } else {
            this.$message({
              message: '该用户未进行注册，注册一个？',
              type: 'error',
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // <!--免费注册页-->
    gotoLoginReg() {
      this.$router.push({
        path: '/register',
      })
    },
    // <!--忘记密码页-->
    gotoLoginForget() {
      this.$router.push({
        path: '/updataPassword',
      })
    },
  },
}
</script>
 
<style scoped>
.page {
  background: url('../../assets/image/newbg.png');
  background-size: 100% 100%;
  background-color: #5dd5c8;
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.login-box {
  position: absolute;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  width: 400px;
  max-width: 400px;
  background-color: #fff;
  margin: 0;
  padding: 15px 35px;
  box-sizing: border-box;
  font-family: 'Source Sans Pro', sans-serif;
}
.title {
  font-size: 20px;
  line-height: 50px;
  font-weight: bold;
  margin: 10px;
  text-align: center;
}
.el-tabs__header {
  margin: 0 0 30px 0;
}
.el-tabs__nav-wrap::after {
  height: 0;
}
#tab-first::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 20px;
  background-color: #dcdfe6;
  margin: 8px 0;
  vertical-align: middle;
}
.code .el-form-item__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.code button {
  margin-left: 20px;
  width: 140px;
  text-align: center;
}
.el-form-item:last-child {
  margin-bottom: 6px;
}
.el-button--primary:focus {
  background: #5dd5c8;
  border-color: #5dd5c8;
  color: #f7f7f7;
}
.el-input__suffix-inner {
  margin-right: 6px;
}
.login {
  margin-top: -15px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.gotoRight {
  float: right;
  color: #999999;
}
.gotoRight span:hover {
  color: #5dd5c8;
}
</style>